<template>
  <div>
    <div>
      <el-form :inline="true" :model="visitor" class="demo-form-inline">
        <el-form-item label="访客姓名">
          <el-input v-model="visitor.visitorName" placeholder="请输入访客姓名" />
        </el-form-item>
        <el-form-item label="访客手机号">
          <el-input v-model="visitor.visitorPhoneNumber" placeholder="请输入访客手机号" />
        </el-form-item>
        <el-form-item label="到访时间">
          <div class="block">
            <el-date-picker
              v-model="visitor.visitorDate"
              value-format="yyyy-MM-dd"
              type="date"
              placeholder="选择到访时间"
              align="right"
            />
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadVisitor">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadReset">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--按钮-->
    <el-button type="primary" size="mini" icon="el-icon-download" @click="handleExport">导出</el-button>
    <div>
      <el-table
        :data="visitors"
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          label="序号"
          width="120"
        >
          <template slot-scope="scope">{{ scope.$index+1 }}</template>
        </el-table-column>
        <el-table-column
          label="访客姓名"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.visitorName }}</template>
        </el-table-column>
        <el-table-column
          label="访客手机号"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.visitorPhoneNumber }}</template>
        </el-table-column>
        <el-table-column
          label="小区名称"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.communityName }}</template>
        </el-table-column>
        <el-table-column
          label="到访时间"
          width="150"
        >
          <template slot-scope="scope">{{ scope.row.visitorDate }}</template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          width="200"
        >
          <template slot-scope="scope">{{ scope.row.createTime }}</template>
        </el-table-column>
        <el-table-column
          label="备注"
        >
          <template slot-scope="scope">{{ scope.row.remark }}</template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="120"
        />
      </el-table>
    </div>
    <div class="block">
      <span class="demonstration" />
      <el-pagination
        :current-page="current"
        :page-sizes="[3, 6, 9, 12]"
        :page-size="size"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>

</template>

<script>

export default {
  name: 'Visitor',
  data() {
    return {
      value1: '',
      value2: '',
      value3: '',
      current: 1, // 当前页
      size: 3,
      visitorName: '',
      visitorPhoneNumber: '',
      visitorDate: '',
      query: '',
      total: 0, // 访客
      visitors: [], // 访客集合
      visitor: {
        index: '',
        visitorName: '',
        visitorPhoneNumber: '',
        communityName: '',
        visitorDate: '',
        createTime: '',
        remark: ''
      }

    }
  }, created() {
    this.loadVisitor(this.current, this.size)
  },
  // 显示
  methods: {
    loadVisitor(current, size, visitors) {
      current = this.current
      size = this.size
      visitors = this.visitor
      console.log(this.visitors)
      // eslint-disable-next-line no-undef
      this.axios({
        url: '/visitors/page?' + this.qs.stringify(visitors),
        menthod: 'get',
        params: {
          current: current,
          size: size
        }
      })
        .then(res => {
          console.log(res.data)
          this.visitors = res.data.records
          this.current = res.data.current
          this.size = res.data.size
          this.total = res.data.total
          console.log(res.data.total)
        })
    },
    handleSizeChange(nowSize) {
      this.size = nowSize
      this.loadVisitor(this.current, this.size)
      console.log(`每页 ${nowSize} 条`)
    },
    handleCurrentChange(nowPage) {
      this.current = nowPage
      this.loadVisitor(this.current, this.size)
      console.log(`当前页: ${nowPage}`)
    },
    loadReset() {
      this.visitor = {
        visitorName: '',
        visitorPhoneNumber: '',
        visitorDate: ''
      }
      this.loadVisitor(this.current, this.size)
    },
    handleExport() {
      // eslint-disable-next-line no-undef
      this.axios({
        method: 'get',
        url: '/visitor/download',
        responseType: 'arraybuffer'
      })
        .then(res => {
          console.log(res)
          // 使用Blob对象将后端返回的Arraybuffer格式得数据转成blob类型的数据 window.URL.createObjectURL(blob)可以把一个blob转成blobURL，用作图片显示，文件下载（不能再服务器上存储，只能在浏览器使用）
          var b = new Blob([res.data], { type: 'application/vnd.ms-excel' })
          // 使用URL对象将blob类型的数据生成一个在线下载的链接
          var url = URL.createObjectURL(b)
          // 然后我们使用a标签进行下载
          var link = document.createElement('a')

          // 设置导出的文件名
          link.download = Date.now() + '.xlsx'
          link.href = url
          // 点击获取文件
          link.click();

          (err) => {
            console.log(err)
          }
        })
    }
  }
}
</script>

<style scoped>

</style>
